<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="show=!show">点我，给你点颜色看看！</button>
        <table v-if="show">
            <tr v-for="(user,index) in users" :key="index" v-if="index%2==0" style="background-color: mediumvioletred;">
                <td v-text="index+1"></td>
                <td v-for="(k,v) in user" v-text="k"></td>
            </tr>
            <tr v-else style="background-color: deepskyblue;">
                <td v-text="index+1"></td>
                <td v-for="(k,v) in user" v-text="k"></td>
            </tr>
        </table>
        <hr>
        <table v-show="show">
            <tr v-for="(user,index) in users" :key="index" v-if="index%2==0" style="background-color: mediumvioletred;">
                <td v-text="index+1"></td>
                <td v-for="(k,v) in user" v-text="k"></td>
            </tr>
            <tr v-else style="background-color: deepskyblue;">
                <td v-text="index+1"></td>
                <td v-for="(k,v) in user" v-text="k"></td>
            </tr>
        </table>
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                users: [
                    {name: '柳岩', gender: '女', age: 20},
                    {name: '有哥', gender: '男', age: 30},
                    {name: '范冰冰', gender: '女', age: 24},
                    {name: '刘亦菲', gender: '女', age: 18},
                    {name: '古力娜扎', gender: '女', age: 25}
                ],
                show: true
            },

        });
    </script>
</body>
</html>